▉ 前言

這裡將利用教程所提供的"Treasure Hunter Game"來直接學習PixiJS中的語法。"Treasure Hunter Game"的程式碼 ---> Click Here !

系統提示：「The really important thing is not to live, but to live well.」，PixiJS青銅玩家仍卡關於現階段，僅獲得經驗提昇等級。

▉ 支線任務：讓角色行動但置中於地圖

▍任務說明

在【LV. 27】階段完成的樣子放到codepen，看看昨天的成品離我們想要達到的目標只完成了一半，角色移動時仍可以置中於畫面（以下稱screen），但是會發現當超過一定範圍時，就失效了QQ，以及到邊界時回出現黑邊而無法被地圖完全覆蓋（如下），所以今天的任務就是要把錯誤給揪出來並解決掉！

▍作法 限制地圖邊界範圍在screen內

在還沒設置地圖邊界之前，如果角色跑到邊緣，會發現screen中沒有完全被地圖給覆蓋！因此在地圖移動的同時，我們也必須給地圖一個移動的範圍限制，避免上述情形發生。

至於該怎麼完成呢？用簡單的if條件句即可！

困難的地方在於什麼條件下，執行哪些行為。因此先想想看，當角色分別到地圖的「上、下、左、右」邊界的當下（可以想像是個臨界點），而只要超過那個臨界點，我們就必須把地圖移動給限制住，不能再讓他移動。

所以我們的目標就是找到那四個臨界點為何？
底下將分別以左側、右側、上側、下側來用圖以及程式碼分析：
（黑框框即screen，我們在網頁中的可視範圍，也就是說超出screen範圍，就看不到了）

1. 左側：

if(newMapPosX > 0){
    newMapPosX = 0;
}

2. 右側：

if(newMapPosX < app.screen.width - map.width){
    newMapPosX = app.screen.width - map.width;
}

3. 上側

if(newMapPosY > 0){
    newMapPosY = 0;
}

4. 下側

if(newMapPosY < app.screen.height - map.height){
    newMapPosY = app.screen.height - map.height;
}

▉ 結語

附上今天完成的codepen，可以看到...還是沒完成QQ雖然地圖邊界設置好了，但是角色跑一跑還是會跑消失，還沒找到原因，但已經寫了4個小時，今天剩下約半小時的時間可以寫，應該是沒辦法再增加內容了。

明天LV.29，給自己的任務就是把這無法置中的問題給解決掉。（原本想說一天可以寫一個擴充功能，看來太高估了QQ）

參考資料

• PixiJS 教程中文版
• PIXI, TypeScript: Character Keyboard Movements + Screen Follow